
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {registrationsAction, registrationsState} from './index';
import moment from 'moment';
import { Table } from 'antd';
import SearchList from './SeachList/SearchList';
import less from './Registrations.less';
import { axios } from 'utils';
import download from 'downloadjs';
import TextArea from 'antd/lib/input/TextArea';

class Registrations extends Component{
    constructor(props) {
        super(props);
        this.state = {
            initTime: [moment(), moment()],
            loading: false,
            btnDisable: false
        };
        this.columns = [
            { title: '日期', dataIndex: 'day', key: 'day'},
            { title: '新客总注册量', dataIndex: 'registerCount', key: 'registerCount'},
            { title: '新客实名认证量', dataIndex: 'idCardCount', key: 'idCardCount'},
            { title: '新客通讯录上传量', dataIndex: 'contactCount', key: 'contactCount'},
            { title: '新客运营商认证量', dataIndex: 'yysCount', key: 'yysCount'},
            { title: '新客绑卡认证量', dataIndex: 'bankCount', key: 'bankCount'},
            { title: '新客芝麻认证量', dataIndex: 'zmCount', key: 'zmCount'},
            { title: '新客总申请量', dataIndex: 'applyCount', key: 'applyCount'},
            { title: '新客放款量', dataIndex: 'loanCount', key: 'loanCount'},
            { 
                title: '新客放款转化率',
                dataIndex: 'loanRate', key: 'loanRate'
                // render(text) {
                //     return `${text}%`;
                // }
            },
            { 
                title: '新客申请转化率',
                dataIndex: 'applyRate', key: 'applyRate'
                // render(text) {
                //     return `${text}%`;
                // }
            }
        ];
    }

    getTableData = (data) => {
        console.log(data)
        axios({
            url: '/hs/admin/statistics/dayRegisterStatistic',
            method: 'post',
            data: data
        }).then((res) => {
            if(res.code === 200){  
                this.setState({
                    tableData:res.data
                })
            }
            this.setState({
                loading: false,
                btnDisable: false
            })
        })
    }

    convertParams = (time) => {
        const isArr = Array.isArray(time) && time.length > 0;
        return {
            startTime: isArr ? time[0].format('YYYY-MM-DD 00:00:00') : '',
            endTime: isArr ? time[1].format('YYYY-MM-DD 23:59:59') : ''
        };
    }
    handleSearch = (obj) => {
        const { time } = obj;
        this.setState({
            loading: true,
            btnDisable: true
        })
        const params = this.convertParams(time);
        this.getTableData({ ...params });
    }

    handlReturn = (obj) => {
        const { time } = obj;
        const params = this.convertParams(time);
        console.log(params)
        axios({
            url: '/hs/admin/statistics/dayRegisterStatisticReport',
            method: 'post',
            responseType: 'blob',
            data: params
        }).then((res) => {
            download(res, `日转化率统计${Date.now()}.xls`);
        }).catch((err) => {
            console.log(err)
        });
    }

    componentDidMount() {
        const params = this.convertParams(this.state.initTime)
        this.getTableData({ ...params });
    }

    render() {
        const { tableData, initTime, loading } = this.state;
        return (
            <div>
                <SearchList handleSearch={this.handleSearch} handlReturn={this.handlReturn} btnDisable={this.state.btnDisable} initTime={initTime} loading={loading}/>
                <div className={less.tableTop}>
                    <Table columns={this.columns} dataSource={tableData} loading={loading} pagination={false} bordered scroll={{ x: '100%' }} />
                </div>
            </div>
        );

    }
}

const mapStateToProps = (state) => {
    const { businessStatisticsState: { registrationsState } } = state;
    return {
        tableData: registrationsState['tableData'],
        loading: registrationsState['loading']
    };
}
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: registrationsAction.assGetTableData,
        setTableData: registrationsAction.assSetTableData
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Registrations);